<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>社区文章列表</title>

    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/hotui/css/font-awesome.min.css" rel="stylesheet"
          th:href="@{/resource/hotui/css/font-awesome.min.css}">
    <!-- Morris -->
    <link href="../../resource/hotui/css/plugins/morris/morris-0.4.3.min.css"
          rel="stylesheet" th:href="@{/resource/hotui/css/plugins/morris/morris-0.4.3.min.css}">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" rel="stylesheet"
          th:href="@{/resource/hotui/css/style.min-1.0.8.css}">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          rel="stylesheet" th:href="@{/resource/hotui/css/hotui.style.override.css}"/>
    <link href="../../resource/hotui/js/plugins/datetimepick/css/daterangepicker.css"
          rel="stylesheet" th:href="@{/resource/hotui/js/plugins/datetimepick/css/daterangepicker.css}"/>

    <style type="text/css">
        .hr-line-dashed {
            margin: 10px 0;
            height: 1px;
            border-top: 1px dashed #e7eaec;
            background-color: #fff;
            color: #fff;
        }

        .audit_images .article-img {

        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight tooltip-demo">
    <!--search-->
    <form class="search-panel" id="searchForm" method="get" role="form"
          th:object="${condition}">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox">
                    <div class="ibox-content">
                        <div class="form-inline">
                            <input name="pageIndex" th:value="${pageIndex}" type="hidden"/>
                            <input id="status" name="status" th:value="*{status}" type="hidden"/>
                            <div class="form-group m-r-sm">
                                <label class=" control-label" for="keyword">文章名称：</label>
                                <input class="form-control input-sm mb10" id="keyword" name="keyword"
                                       placeholder="文章名称"
                                       style="width: 156px;" th:value="*{keyword}" type="text"/>
                            </div>
                            <div class="form-group m-r-sm">
                                <label class=" control-label" for="mobile">作者手机：</label>
                                <input class="form-control input-sm mb10" id="mobile" name="mobile"
                                       placeholder="作者手机"
                                       style="width: 156px;" th:value="*{mobile}" type="text"/>
                            </div>
                            <div class="form-group m-r-sm">
                                <label class=" control-label" for="nickName">作者昵称：</label>
                                <input class="form-control input-sm mb10" id="nickName" name="nickName"
                                       placeholder="作者昵称"
                                       style="width: 156px;" th:value="*{nickName}" type="text"/>
                            </div>
                            <div class="form-group m-r-sm">
                                <button class="btn btn-primary btn-sm m-b-none searchBtn"
                                        onclick="listHandler.search(1)"
                                        type="button">筛选
                                </button>
                                <button class="btn btn-primary btn-sm m-b-none" onclick="listHandler.searchAll()"
                                        type="button">重置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!--search-->

    <!--list-->
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins m-b-none">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active"
                            th:class="${condition.status==-1?'active':''}">
                            <a href="#" th:href="@{/community/list(status=-1)}">全部</a>
                        </li>
                        <li
                                th:class="${condition.status==1?'active':''}">
                            <a href="#" th:href="@{/community/list(status=1)}">审核通过</a>
                        </li>
                        <li th:class="${condition.status==0?'active':''}">
                            <a th:href="@{/community/list(status=0)}">待审核</a>
                        </li>
                        <li th:class="${condition.status==2?'active':''}">
                            <a th:href="@{/community/list(status=2)}">审核失败</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active">
                            <div class="panel-body table-responsive">
                                <table class="table table-bordered table-hover table-center">
                                    <thead>
                                    <tr>
                                        <th style="width: 100px">封面</th>
                                        <th>作者信息</th>
                                        <th>文章标题</th>
                                        <th>创建时间</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    <tr th:each="item:${list}">
                                        <td>
                                            <img th:if="${item.contentType.code==1}" style="width: 100px;height:100px;"
                                                 th:src="${item.mainPic}"/>
                                            <img th:if="${item.contentType.code==0}" style="width: 100px;height:100px;"
                                                 th:src="${item.mainPic+'?x-oss-process=image/resize,l_200'}"/>
                                        </td>
                                        <td>
                                            <span th:text="${item.author.nickName}"></span>
                                            <br>
                                            <span th:text="${item.author.mobile}"></span>
                                        </td>
                                        <td th:text="${item.title}"></td>
                                        <td th:text="${#temporals.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                                        <td th:class="${item.auditStatus.statusClass()}"
                                            th:text="${item.auditStatus.desc}"></td>
                                        <td>
                                            <a href="javascript:listHandler.edit(0)"
                                               th:href="|javascript:listHandler.audit(${item.id},1)|">查看</a>
                                            |
                                            <th:block th:if="${item.auditStatus.code==0}">
                                                <a href="javascript:listHandler.audit(0)"
                                                   th:href="|javascript:listHandler.audit(${item.id},0)|">审核</a>
                                                |
                                            </th:block>

                                            <a href="javascript:listHandler.delete(0)"
                                               th:href="|javascript:listHandler.delete(${item.id})|">删除</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <p style="float: left; margin: 20px 0;">
                                    共<span th:text="${totalRecords}"></span>条记录，当前第<span th:text="${pageIndex}"></span>/<span
                                        th:text="${totalPages==0?1:totalPages}"></span>，每页20条记录
                                </p>
                                <ul class="pagination pagination-split" style="float: right;">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script id="community_modal" type="text/html">
    <input type="hidden" id="article_id"/>
    <div class="form-horizontal" style="width: 600px;">
        <div class="form-group">
            <label class="col-sm-2 control-label">作者账号:</label>
            <div class="col-sm-6">
                <div class="input-group">
                    <input name="article_mobile" id="auction_securityDeposit" value="" type="text"
                           class="form-control input-s-sm" placeholder="作者手机账号">
                </div>
            </div>
        </div>
        <div class="hr-line-dashed "></div>
        <div class="form-group">
            <label class="col-sm-2 control-label">文章标题:</label>
            <div class="col-sm-10">
                <div style="width: 200px" class='input-group'>
                    <input type="text" class="form-control input-sm" id="article_title"
                           placeholder="文章标题"/>
                </div>
            </div>
        </div>
        <div class="hr-line-dashed "></div>
        <div class="form-group">
            <label class="col-sm-2 control-label">文章内容:</label>
            <div class="col-sm-10 form-inline">
                <div class="input-group">
                    <textarea style="width: 380px;" rows="8" id="article_content" class="form-control"
                              placeholder="文章内容"></textarea>
                </div>
            </div>
        </div>
    </div>
</script>


<script id="community_audit_modal" type="text/html">
    <input type="hidden" id="audit_id"/>
    <div class="form-horizontal" style="width: 600px;">
        <div class="form-group">
            <label class="col-sm-2 control-label">文章标题:</label>
            <div class="col-sm-10">
                <div style="width: 200px" class='input-group' id="audit_article_title">
                </div>
            </div>
        </div>
        <div class="hr-line-dashed "></div>
        <div class="form-group">
            <label class="col-sm-2 control-label">文章内容:</label>
            <div class="col-sm-10 form-inline">
                <div class="input-group" id="audit_article_content">
                </div>
            </div>
        </div>
        <div class="hr-line-dashed "></div>
        <div class="form-group">
            <label class="col-sm-2 control-label">图片:</label>
            <div class="col-sm-10 form-inline">
                <div class="input-group" id="audit_images">

                </div>
            </div>
        </div>
        <div class="hr-line-dashed "></div>
        <div class="form-group">
            <label class="col-sm-2 control-label">视频:</label>
            <div class="col-sm-10 form-inline">
                <div class="input-group" id="audit_video_url">

                </div>
            </div>
        </div>
        <div class="audit_box">
            <div class="hr-line-dashed "></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">审核:</label>
                <div class="col-sm-6">
                    <div class="input-group">
                        <select class="form-control" id="sltAuditStatus" name="sltAuditStatus">
                            <option value="1">审核成功</option>
                            <option value="2">审核失败</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="hr-line-dashed "></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">理由:</label>
                <div class="col-sm-10 form-inline">
                    <div class="input-group">
                    <textarea style="width: 380px;" rows="4" id="article_reason" class="form-control"
                              placeholder="审核理由"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>


<!--基础框架js-->
<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js(123123)}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js}"></script>
<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>
<script src="../../resource/lib/moment.min.js" th:src="@{/resource/lib/moment.min.js}"></script>
<script src="../../resource/hotui/js/plugins/datetimepick/js/daterangepicker.js"
        th:src="@{/resource/hotui/js/plugins/datetimepick/js/daterangepicker.js}"></script>


<script th:inline="javascript" type="text/javascript">
    const pageIndex = /*[[${pageIndex}]]*/  1;
    const totalPages = /*[[${totalPages}]]*/  0;
    const pageUri = /*[[@{/community/list}]]*/  "";
    const communityUri = /*[[@{/community}]]*/  "";
</script>
<script>
    var communityModal = $("#community_modal").modal("编辑文章", function () {
        let articleId = $("#article_id").val();
        let title = $("#article_title").val();
        let content = $("#article_content").val();
        let mobile = $("#article_mobile").val();
        let requestData = {
            articleId: articleId,
            title: title,
            content: content,
            mobile: mobile
        };
        hot.ajax(communityUri + "/edit", requestData, function (apiResult) {
            if (apiResult.resultCode === 2000) {
                hot.tip.success("发布成功", function () {
                    window.location.reload();
                });
            } else {
                hot.tip.error(apiResult.resultMsg);
            }
        }, function () {
        }, "post", 300);
    });

    var communityAuditModal = $("#community_audit_modal").modal("文章详情", function () {
        let articleId = $("#audit_id").val();
        let reason = $("#article_reason").val();
        let auditCode = $("#sltAuditStatus").val();
        let requestData = {
            id: articleId,
            auditCode: auditCode,
            reason: reason,
        };
        hot.ajax(communityUri + "/audit", requestData, function (apiResult) {
            if (apiResult.resultCode === 2000) {
                hot.tip.success("操作成功", function () {
                    window.location.reload();
                });
            } else {
                hot.tip.error(apiResult.resultMsg);
            }
        }, function () {
        }, "post", 300);
    });


    $(function () {
        //初始化分页
        let pageinate = new hot.paging(".pagination", pageIndex, totalPages, 7);
        pageinate.init(function (p) {
            listHandler.search(p);
        });
        $(document).keyup(function (event) {
            if (event.keyCode === 13) {
                $(".searchBtn").trigger("click");
            }
        });
    });

    let listHandler = {
        navTo(url) {
            window.open(url, "_blank");
        },
        search: function (pageIndex) {
            $("input[name=pageIndex]").val(pageIndex);
            $("#searchForm").submit();
        },
        searchAll: function () {
            window.location.href = pageUri + "?status=" + $("#status").val();
        },
        audit: function (dataId, code) {
            let options = {
                btn: ["审核", "取消"]
            };
            if (code == 1) {
                options.btn = [];
            }
            communityAuditModal.show(function () {
                $("#audit_id").val(dataId);
                if (code == 1) {
                    $(".audit_box").hide();
                } else {
                    $(".audit_box").show();
                }
                hot.ajax(communityUri + "/detail", {
                    id: dataId || 0
                }, function (apiResult) {
                    if (apiResult.resultCode === 2000) {
                        let data = apiResult.data;
                        $("#audit_article_content").html(data.description);
                        $("#audit_article_title").html(data.title);
                        let imagesHtml = '';
                        $.each(data.images, function (i, item) {
                            imagesHtml += "<img  style=\"width: 50px;margin: 5px\" onclick=\"listHandler.navTo('" + item + "')\" src=\"" + item + "\"  />"
                        });
                        $("#audit_images").html(imagesHtml);
                        if (data.videoUrl && data.videoUrl.length > 0) {
                            $("#audit_video_url").html('<a href="' + data.videoUrl + '" target="_blank">点击查看视频文件</a>')
                            // imagesHtml = '<img  style="width: 50px;margin: 5px" onclick="listHandler.navTo()" src="' + data.mainPic + '"  />';
                            imagesHtml = "<img  style=\"width: 50px;margin: 5px\" onclick=\"listHandler.navTo('" + data.mainPic + "')\" src=\"" + data.mainPic + "\"  />"
                            $("#audit_images").html(imagesHtml);
                        }
                    }
                }, function () {
                }, "get");

            }, options);
        },
        edit: function (dataId) {
            this.communityModalShow(dataId)
        },
        delete: function (dataId) {
            hot.confirm("确认要删除该文章?", function () {
                hot.ajax(communityUri + "/delete", {
                    id: dataId
                }, function (apiResult) {
                    if (apiResult.resultCode === 2000) {
                        hot.tip.success("删除成功", function () {
                            window.location.reload();
                        });
                    } else {
                        hot.tip.error(apiResult.resultMsg);
                    }
                }, function () {
                }, "post");
            });
        },
        communityModalShow: function (dataId) {
            let options = {
                btn: ["保存文章", "取消"]
            };
            communityModal.show(function () {
                $("#article_id").val(dataId);
                if (parseInt(dataId > 0)) {
                    hot.ajax(communityUri + "/detail", {
                        id: dataId || 0
                    }, function (apiResult) {
                        $("#article_content").val(apiResult.data.description);
                        $("#article_title").val(apiResult.data.title);
                        $("#article_mobile").val(apiResult.data.author.mobile);
                    }, function () {
                    }, "get");
                }
            }, options);
        }
    }
</script>
</body>
</html>
